<template>
	<view class="designerHeader">
		<image src="/static/img/personalHeader.png" mode="widthFix" class="background"></image>
		<view class="header">
			<image src="/static/img/personalHeader.png" mode="widthFix" class="header_background"></image>
			<view class="header_left" @tap="back">
				<image src="/static/svg/return.svg" mode=""></image>
			</view>
			<view class="header_middle">
				<text>个人主页</text>
			</view>
			<view></view>
		</view>
		<view style="height: 88rpx;"></view>
		<image :src="message.headPicture?message.headPicture:'/static/img/toux2x.png'" mode="" class="head"></image>
		<view class="name">
			<view :style="{width: (message.nickname.length+0.3)+'em'}" v-if="message.nickname">
				<text>{{message.nickname?message.nickname:message.phone}}</text>
				<image src="/static/svg/man.svg" mode="" v-if="message.sex=='男'"></image>
				<image src="/static/svg/woman.svg" mode="" v-if="message.sex=='女'"></image>
			</view>
		</view>
		<view class="guanzhu">
			<view @tap="toLookHisFans" data-type='关注'>
				<text>关注</text>
				<text style="margin-left:0.5em;">{{message.focusNum?message.focusNum:0}}</text>
			</view>
			<view class="xian"></view>
			<view @tap="toLookHisFans" data-type='粉丝'>
				<text>粉丝</text>
				<text style="margin-left:0.5em;">{{message.fansNum?message.fansNum:0}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['message','personalUserId','isIndex'],
		data() {
			return {
				
			};
		},
		methods: {
			back(){
				if(this.isIndex){
					window.location.href = 'http://classic.wljiam.com/personal'
					return
				}
				uni.navigateBack({
					delta: 1
				})
			},	
			toLookHisFans(e) {
				let type=e.currentTarget.dataset.type
				uni.navigateTo({
					url: '/pages/otherHomepage/hisFans?type='+type+"&personalUserId="+this.personalUserId
				})
			}
		},
	}
</script>

<style lang="scss">
.designerHeader{
	height: 448rpx;
	background-color:transparent;
	position: relative;
}
.background{
	position: absolute;
	width:750rpx ;
	bottom: 0;
	left: 0;
	z-index: 0;
}
.header{
	height: 88rpx;
	display: flex;
	align-items: center;
	position: relative;
	width: 750rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
	overflow: hidden;
	background-color:transparent;
	.header_background{
		position: absolute;
		width:750rpx ;
		bottom: -360rpx;
		left: 0;
		z-index: -1;
	}
	view{
		width: 25%;
		display: flex;
		align-items: center;
	}
	.header_left{
		image{
			height:44rpx ;
			width: 44rpx;
			margin-left: 30rpx;
		}
	}
	.header_middle{
		width: 50%;
		justify-content:center;
		text{
			font-size: 36rpx;
			letter-spacing: 1rpx;
			color: #333333;
		}
	}
}
.head{
	display: block;
	height:160rpx ;
	width: 160rpx;
	margin: 30rpx auto 0;
	border-radius: 50%;
}
.name{
	width: 750rpx;
	margin-top: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	view{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		text{
			font-size: 40rpx;
			color:#333333 ;
			font-weight: bold;
			line-height: 2rpx;
			line-height: 40rpx;
		}
		image{
			height:39rpx ;
			width: 39rpx;
			position: absolute;
			right: -55rpx;
		}
	}
}
.guanzhu{
	height:90rpx ;
	margin-top: 10rpx;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
	view{
		text-align: center;
		width: 374.5rpx;
		font-size:30rpx ;
		color:#666666 ;
		letter-spacing: 1rpx;
		line-height: 30rpx;
	}
	.xian{
		width: 1rpx;
		height: 22rpx;
		background-color:#8D8D8D ;
	}
}
</style>
